<script setup>
  import {
    ref,
    reactive,
    nextTick,
    watch
  } from 'vue'
  const innerVisible = ref(false)
  const value1 = ref < [Date, Date] > ([
    new Date(2016, 9, 10, 8, 40),
    new Date(2016, 9, 10, 9, 40),
  ])
  const tableData = [{
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
  
  let tabIndex = 2
  const editableTabsValue = ref('2')
  const editableTabs = ref([{
      title: 'Tab 1',
      name: '1',
      content: 'Tab 1 content',
    },
    {
      title: 'Tab 2',
      name: '2',
      content: 'Tab 2 content',
    },
  ])

  const handleTabsEdit = (
    targetName,
    action
  ) => {
    if (action === 'add') {
      const newTabName = `${++tabIndex}`
      editableTabs.value.push({
        title: 'Tab '+ tabIndex,
        name: newTabName,
        content: 'New Tab content',
      })
      editableTabsValue.value = newTabName
    } else if (action === 'remove') {
      const tabs = editableTabs.value
      let activeName = editableTabsValue.value
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }

      editableTabsValue.value = activeName
      editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
    }
  }
</script>
<template>

  <div class="addContent">
    <el-form label-position="right" label-width="auto" :model="formLabelAlign" :label-width="formLabelWidth">
      <!-- <slot name="reduce"></slot> -->
      <el-form-item class="showTime">
        <el-button tag="div" role="button" tabindex="0">2024/4/12 周五</el-button>
      </el-form-item>
      <el-form-item label="锁定时段" class="timePicker" :required="true">
        <!-- <el-button tag="div" role="button" tabindex="0">需要显示
          <template v-slot:"default">
            <img src="/src/assets/close.png" alt="">
          </template>
        </el-button> -->
        <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" closable editable @edit="handleTabsEdit"
          @tab-remove="removeTab">
          <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
            <span>应锁号源总数：0{{tabIndex}}</span>
            <span>实排号源总数：0</span>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="诊所名称" width="180" />
              <el-table-column prop="name" label="应锁号源" width="180" />
              <el-table-column prop="address" label="实排号源" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <!--  <div class="iconAll">
          <img src="/src/assets/edit.png" class="icon" alt="">
          <img src="/src/assets/add.png" class="icon" @click="openTime(innerVisible = true)">
        </div> -->
      </el-form-item>
    </el-form>
  </div>
  <!--锁定时间 时间选择弹窗-->
  <el-dialog v-model="innerVisible" width="500" title="添加时段" append-to-body align-center>
    <el-time-picker v-model="value1" is-range range-separator="-" start-placeholder="Start time"
      end-placeholder="End time" />
  </el-dialog>
</template>



<style lang="scss" scoped>
  ::v-deep .el-table {
    color: #515a6e;
    font-weight: 400;
    font-size: 14px !important;
  }

  ::v-deep thead tr th .cell {
    color: #515a6e;
    font-weight: 500;

  }

  ::v-deep thead tr th {
    background: #fafafa !important;
  }

  ::v-deep tbody tr td {
    font-size: 13px !important;
  }

  .addContent {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 10px 24px 10px 24px;
    margin-bottom: 20px;
    position: relative;

    // .timePicker {
    //   width: 400px;
    // }

    .iconAll {
      position: absolute;
      right: 0;
      top: 0;
    }

    .lastInput {

      padding: 15px 20px;
      background: #f9f9f9;
      border-radius: 4px;
      width: 100%;

      .input {
        width: 22%;
      }
    }

  }

  .lastInput ::v-deep .el-form-item__content {
    display: flex;
    justify-content: space-around;
  }

  .showTime ::v-deep .el-button {
    width: 200px !important;
  }


  ::v-deep .el-tabs--card {
    border: none;
    border-right: none !important;
    border-bottom: none !important;
  }

  ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border-radius: 4px !important;
    border: none !important;
    border-bottom: none !important;
  }

  ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
    border: none !important;
    margin-right: 12px;
    // background: pink;
    border: 1px solid #dadce3 !important;
    border-radius: 4px;
    height: 30px !important;
    color: #8e8d96;
    font-weight: 400;
    background: #f8f8f8;
  }

  ::v-deep .el-tabs--card>.el-tabs__header {
    border: none;

  }

  ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border: 1px solid #2d8cf0 !important;
    color: #2d8cf0;
    background: #fff;
  }

  .demo-tabs {
    width: 800px;

  }

  .icon {
    width: 28px;
    height: 28px;
    margin: 0 4px
  }

  ::v-deep .el-tabs__nav-prev {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  ::v-deep .el-tabs__nav-next {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
</style>